<!--
 * @Description: 
 * @Date: 2023-02-23 18:07:17
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 14:26:47
-->
<template>
	<div class="zhi-nan">
		<!-- 概况 -->
		<!-- <div class="nav">
			<div class="nav-info">
				<p>
					荆竹村位于重庆市武隆区仙女山街道西南部，西接羊角街道，南邻芙蓉街道，东接仙女山街道白果村，北邻仙女山街道石梁子社区，幅员面积34平方公里。全村辖8个村民小组638户，户籍人口2038人，森林覆盖率67%。
				</p>
				<div class="nav-icon">
					<div class="icon-item-box" v-for="(i, index) in icon" :key="index" @click="changeIcon(i)">
						<img class="icon-img" :src="i.icon" alt="" />
						<a class="icon-text">{{ i.title }}</a>
					</div>
				</div>
			</div>

			<div class="right-img">
				<img src="https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangye/tayouxing/jingzhuzhiinan/ditu.png?imageMogr2/thumbnail/1280x" alt="" />
			</div>
		</div>
		<div class="shop-list" v-if="activeIconIndex !== -1">
			<div class="shop" v-for="(item, index) in icon[activeIconIndex].details" :key="index">
				<div class="info">
					<div class="content">
						<p class="content-text" v-if="item.desc == ''">
							<span>1、当您完成了护照检查后，请携带您所有的行李（包括托运行李），自行选择通道通关。 </span>
							<span>2、在选择海关通道前，请先了解清楚海关通关管理规定。对错选通道而引致的一切法律责任，将由旅客自行承担。</span>
							<span>3、旅客需要向海关办理申报手续的，请到海关申报台以书面形式完成。此外在任何地点以及其他任何方式的申报均视为无效。</span>
							<span>4、请您出示有效进出境证件通关。</span>
							<span>5、对旅客带有国家规定的应税物品，海关将予照章征税。请旅客持税单自行前往海关指定的银行缴纳税款。</span>
							<span>6、对携带超量或未办结海关手续的货物、物品，海关将提供暂时保管，并按规定收取保管费。</span>
						</p>
						<p v-else>{{ item.desc }}</p>

						<img v-if="item.id == 1.1" src="../../../assets/images/test/table.png" alt="" />
					</div>
				</div>
				<el-image class="cover" :src="item.img" fit="cover" />
			</div>
		</div> -->
		<!-- 概况end -->
		<!-- 地图区域start -->
		<div class="map-box">
			<el-image fit="contain" v-for="(map, index) in mapList" :key="index" :src="map.img"> </el-image>
		</div>
		<!-- 地图区域end -->

		<!-- 推荐景点 -->
		<div class="recommend-box">
			<div class="recommend-title">推荐景点</div>
			<div class="recommend-item-box">
				<div class="recommend-item" v-for="i in list" :key="i.tel">
					<img :src="i.img" alt="" />
					<div class="item-text-box">
						<div class="item-text">
							<span>{{ i.name }}</span>
							<button>
								<a :href="i.href" target="_blank" style="color: #8a1313; text-decoration: none"> 了解更多 </a>
							</button>
						</div>
						<div class="item-desc">
							{{ i.desc }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="ZhiNan">
import { useBaseStore } from "@/store/base";
const { cosPrefix } = useBaseStore();
// 地图区域
const mapList = [{ img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/map1.png" }, { img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/map2.png" }];

// 推荐景点
const list = [
	{
		name: "归原小镇",
		img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/tuijianjingdian/1.png",
		ways: ["仙女山机场——仙女山街道荆竹村钻天铺——荆竹村水竹坪武隆区——杨叉岭——荆竹村水竹坪"],
		user: "张先生",
		tel: "18617043690",
		desc: `归原小镇位于武隆区仙女山街道荆竹村，距离武隆城区10公里，距离仙女山街道15分钟车程。`,
		href: "http://www.lygyxz.com/"
	},
	{
		name: "寻梦园",
		img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/tuijianjingdian/2.jpg",
		ways: ["武隆区——仙女山街道——钻天铺——杨柳坝"],
		user: "胡女士",
		tel: "13983228377",
		desc: `寻梦园位于武隆仙女山镇荆竹村，是集高山水果品种筛选，绿色种植技术研究与示范，采摘体验与科普教育于一体的示范基地。`,
		href: "http://www.lygyxz.com/"
	},
	{
		name: "葡萄仙坛 ",
		img: cosPrefix + "three-level/xiangye/tayouxing/jingzhuzhiinan/tuijianjingdian/3.jpg",
		ways: ["武隆区——仙女山街道——钻天铺——杨柳坝"],
		user: "陈先生",
		tel: "18723816158",
		desc: `葡萄仙坛，原名武龙珠葡萄采摘园，是集葡萄培育、采摘体验、休闲观光等为一体的葡萄生态园。`,
		href: "http://www.lygyxz.com/"
	},
	{
		name: "仙女山",
		img: cosPrefix + "three-level/xiangye/tayouxing/zhoubianzhinan/tuijianjingdian/1.png",
		ways: ["仙女山机场——仙女山街道荆竹村钻天铺——荆竹村水竹坪武隆区——杨叉岭——荆竹村水竹坪"],
		user: "张先生",
		tel: "18617043690",
		desc: `国家森林公园、国家AAAAA级景区。素有“南国牧原”、“东方瑞士”和“落在凡间的伊甸园”之美誉。`,
		href: "https://www.wlkst.com/xns/index.jhtml"
	},
	{
		name: "天生三桥",
		img: cosPrefix + "three-level/xiangye/tayouxing/zhoubianzhinan/tuijianjingdian/2.png",
		ways: ["武隆区——仙女山街道——钻天铺——杨柳坝"],
		user: "胡女士",
		tel: "13983228377",
		desc: `世界自然遗产地核心区、国家AAAAA级景区、国家地质公园。`,
		href: "https://www.wlkst.com/tssq/index.jhtml"
	},
	{
		name: "芙蓉洞",
		img: cosPrefix + "three-level/xiangye/tayouxing/zhoubianzhinan/tuijianjingdian/3.png",
		ways: ["武隆区——仙女山街道——钻天铺——杨柳坝"],
		user: "陈先生",
		tel: "18723816158",
		desc: `世界自然遗产核心景区、国家5A级景区、国家地质公园。`,
		href: "https://www.wlkst.com/frd/index.jhtml"
	}
];
</script>
<style lang="scss" scoped>
.zhi-nan {
	padding: 40px 320px;
}
.map-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.el-image {
		width: 591px;
		height: 348px;
	}
}
.recommend-box {
	margin: 40px 0;
	.recommend-title {
		margin-bottom: 40px;
		font-size: 24px;
		text-align: center;
	}
	.recommend-item-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.recommend-item {
			display: flex;
			flex-direction: column;
			width: 413px;
			height: 416px;
			margin-bottom: 20px;
			border: 1px solid #dbdbdb;
			img {
				width: 100%;
				height: 248px;
			}
			.item-text-box {
				padding: 20px;
				.item-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 20px;
					span {
						font-size: 24px;
					}
					button {
						height: 28px;
						font-size: 14px;
						color: #8a1313;
						cursor: pointer;
						background-color: transparent;
						border: 1px solid #8a1313;
						outline: none;
					}
					.desc {
						font-size: 14px;
						line-height: 24px;
					}
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.zhi-nan {
		padding: 16px;
		.map-box {
			flex-direction: column;
			.el-image {
				width: 100%;
				height: auto;
				margin-bottom: 16px;
			}
		}
		.recommend-box {
			margin-top: 20px;
			.recommend-item-box {
				.recommend-item {
					width: 100%;
				}
			}
		}
	}
}
</style>
